<template>
	<view>
		<!-- <view style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">

		</view> -->
		<headerNav :navRightIcon="false" leftIconColor="#fff" title="系统通知" title-color="#ffffff"/>
		<scroll-view scroll-y>
		<u-swipe-action>
			<u-swipe-action-item  @touchmove="move1(index)" :ref="'swipeAction1' + index"  :threshold="60" :options="item.isPinned ? (item.messageRemindType == 'AcceptNotNotify' ? options4 : options1) : item.messageRemindType == 'AcceptNotNotify' ? options3 : options2" v-for="(item,index) in list" :key='index' :autoClose="true" @click="deleteConversationList1($event,item.notice_id,index)">

				<view v-if="list.length>0 && status==1" style="width: 92%;margin: 20rpx auto;">
					<view style="width: 100%;box-sizing: border-box;padding: 30rpx;background-color: #f8f8f8;border-radius: 10rpx;">
						<view class="flex items-center" @click="wen1(index,item.notice.type,item.notice.is_check,item.notice.group_id)"  style="line-height: 100rpx;box-sizing: border-box;color: #333333;font-size: 28rpx;position: relative;width: 100%;margin: 0 auto;overflow: hidden;position: relative;" >
							<!-- <view  style="float: left;width: 60%;" class="yihang">{{item.notice.title}}</view>
							<view style="float: left;width: 40%;text-align: right;color: #999999;" class="yihang">{{item.create_time}}</view>
							<text style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);color: #cccccc;" class="iconfont icon-xiangyou"></text> -->
							<view style="width: 80rpx;" class="mr20 relative_1">
								<image src="@/static/msg/notice-icon.png" style="width: 80rpx;height: 80rpx;display: block;float: left;margin-top: 10rpx;" mode=""></image>
								<text v-if="item.status==2" style="width: 12rpx;height: 12rpx;text-align: center;display: inline-block;background-color: red;color: #fff;border-radius: 50%;position: absolute;top: 20rpx;right: 0rpx;z-index: 300;"></text>
							</view>
							<view v-if="item.notice.main_content!=''" class="flex-1">
								<view style="line-height: 50rpx;overflow: hidden;">
									<text style="color: #333333;font-size: 32rpx;display: inline-block;max-width: 200rpx;float: left;" class="yihang">{{item.notice.title}}</text>
									<text style="float: right;display: inline-block;max-width: 200rpx;color: #999999;font-size: 22rpx;" class="yihang">{{item.create_time}}</text>
								</view>
								<view style="line-height: 50rpx;color: #999999;font-size: 24rpx;" class="yihang">
									{{item.notice.main_content || ''}}
								</view>
							</view>
							<view v-if="item.notice.main_content==''" style="width: 82%;float: left;">
								<view style="line-height: 100rpx;overflow: hidden;">
									<text style="color: #333333;font-size: 32rpx;display: inline-block;max-width: 200rpx;float: left;" class="yihang">{{item.notice.title}}</text>
									<text style="float: right;display: inline-block;max-width: 200rpx;color: #999999;font-size: 22rpx;" class="yihang">{{item.create_time}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>


			</u-swipe-action-item>
		</u-swipe-action>

		<u-swipe-action>
			<u-swipe-action-item  @touchmove="move2(index)" :ref="'swipeAction2' + index"  :threshold="60" :options="item.isPinned ? (item.messageRemindType == 'AcceptNotNotify' ? options4 : options1) : item.messageRemindType == 'AcceptNotNotify' ? options3 : options2" v-for="(item,index) in list" :key='index' :autoClose="true" @click="deleteConversationList2($event,item.id,index)">
				<view v-if="list.length>0 && status==2" style="width: 92%;margin: 20rpx auto;">
					<view style="width: 100%;box-sizing: border-box;padding: 30rpx;background-color: #f8f8f8;border-radius: 10rpx;">
						<view class="flex items-center" @click="wen(index)" style="line-height: 100rpx;box-sizing: border-box;color: #333333;font-size: 28rpx;position: relative;width: 100%;margin: 0 auto;overflow: hidden;position: relative;" >

							<!-- <view  style="float: left;width: 60%;" class="yihang">{{item.main_content}}</view>
							<view style="float: left;width: 40%;text-align: right;color: #999999;" class="yihang">{{item.create_time}}</view>
							<text style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);color: #cccccc;" class="iconfont icon-xiangyou"></text> -->
							<view sstyle="width: 80rpx;" class="pr20 relative_1">
								<image src="@/static/msg/notice-icon.png" style="width: 80rpx;height: 80rpx;display: block;float: left;margin-top: 10rpx;" mode=""></image>
								<text v-if="item.is_look==2" style="width: 12rpx;height: 12rpx;text-align: center;display: inline-block;background-color: red;color: #fff;border-radius: 50%;position: absolute;top: 20rpx;right: 0rpx;z-index: 300;"></text>
							</view>
							<view v-if="item.main_content!=''" class="flex-1">
								<view style="line-height: 50rpx;overflow: hidden;">
									<text style="color: #333333;font-size: 32rpx;display: inline-block;max-width: 200rpx;float: left;" class="yihang">{{item.main_content}}</text>
									<text style="float: right;display: inline-block;max-width: 200rpx;color: #999999;font-size: 22rpx;" class="yihang">{{item.create_time}}</text>
								</view>
								<view style="line-height: 50rpx;color: #999999;font-size: 24rpx;" class="yihang">
									{{item.main_content || ''}}
								</view>
							</view>
							<view v-if="item.main_content==''" style="width: 82%;float: left;">
								<view style="line-height:100rpx;overflow: hidden;">
									<text style="color: #333333;font-size: 32rpx;display: inline-block;max-width: 200rpx;float: left;" class="yihang">{{item.main_content}}</text>
									<text style="float: right;display: inline-block;max-width: 200rpx;color: #999999;font-size: 22rpx;" class="yihang">{{item.create_time}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</scroll-view>
		<view style="text-align: center;margin-top: 20rpx;">
			<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
			<view style="width: 80%;margin: 0 auto;">
				<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="list.length==0"></u-divider>
				<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了" v-if="list.length>0 && enmpy"></u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				status:'',
				page:1,
				enmpy:false,
				kk:false,
				moveIndex1: -1,
				moveIndex2: -1,
				options1: [
				  // {
				  //   text: '恢复',
				  //   style: {
				  //     backgroundColor: '#3c9cff',
				  //   },
				  // },
				  {
				    text: '删除',
				    style: {
				      backgroundColor: '#f56c6c',
				    },
				  },
				  // {
				  //   text: '免打扰',
				  //   style: {
				  //     backgroundColor: '#ffaa00',
				  //   },
				  // },
				],
				options4: [
				  // {
				  //   text: '恢复',
				  //   style: {
				  //     backgroundColor: '#3c9cff',
				  //   },
				  // },
				  {
				    text: '删除',
				    style: {
				      backgroundColor: '#f56c6c',
				    },
				  },
				  // {
				  //   text: '提醒',
				  //   style: {
				  //     backgroundColor: '#ffaa00',
				  //   },
				  // },
				],
				options2: [
				  // {
				  //   text: '置顶',
				  //   style: {
				  //     backgroundColor: '#3c9cff',
				  //   },
				  // },
				  {
				    text: '删除',
				    style: {
				      backgroundColor: '#f56c6c',
				    },
				  },
				  // {
				  //   text: '免打扰',
				  //   style: {
				  //     backgroundColor: '#ffaa00',
				  //   },
				  // },
				],
				options3: [
				  // {
				  //   text: '顶置',
				  //   style: {
				  //     backgroundColor: '#3c9cff',
				  //   },
				  // },
				  {
				    text: '删除',
				    style: {
				      backgroundColor: '#f56c6c',
				    },
				  },
				  // {
				  //   text: '提醒',
				  //   style: {
				  //     backgroundColor: '#ffaa00',
				  //   },
				  // },
				],
			}
		},
		onLoad(option) {
			this.status=option.index

		},
		onShow(option) {
			// this.index=option.index
			this.page=1
			this.enmpy=false
			this.kk=false
			this.list=[]
			if(this.status==1){
				this.bzzx()
			}else{
				this.hudong()
			}

		},
		onReachBottom: function() {
			console.log(222222222)
			if (this.enmpy) {
				return
			} else {
				if(this.status==1){
					this.bzzx()
				}else{
					this.hudong()
				}
			}
		},
		// onShow(option){
		// 	this.index=option.index
		// 	if(this.index==1){
		// 		this.bzzx()
		// 	}else{
		// 		this.hudong()
		// 	}
		// },
		methods:{
			deleteConversationList1:function(e,id,index){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定删除该通知消息吗',
					success: function (res) {
						if (res.confirm) {
							that.post('api/chat/delete_notice',{notice_id:id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									that.closeSwipeAction1();
									that.list.splice(index,1)
									that.$forceUpdate()
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			deleteConversationList2:function(e,id,index){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定删除该互动消息吗',
					success: function (res) {
						if (res.confirm) {
							that.post('api/chat/delete_interaction',{id:id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									that.closeSwipeAction2();
									that.list.splice(index,1)
									that.$forceUpdate()
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			move1(index) {
				if (this.moveIndex1 == index) return
				this.moveIndex1 = index
			},
			move2(index) {
				if (this.moveIndex2 == index) return
				this.moveIndex2 = index
			},
			closeSwipeAction1() {
				let test = 'swipeAction1' + this.moveIndex1
				console.log(test)
				if (this.moveIndex1 != -1) {
					this.$refs[test][0].closeHandler()
				}
			},
			closeSwipeAction2() {
				let test = 'swipeAction2' + this.moveIndex2
				console.log(test)
				if (this.moveIndex2 != -1) {
					this.$refs[test][0].closeHandler()
				}
			},
			wen:function(index){
				let that=this
				this.post('api/chat/look_interaction',{id:this.list[index].id},true).then(res=>{
					if(res.code==1){
						that.list[index].is_look=1
						if(this.list[index].type!=3){
							uni.navigateTo({
								url:'/fenbao/pages/wenzhang/wzxq?id='+that.list[index].voice_id
							})
						}else{
							uni.navigateTo({
								url:'/fenbao/pages/wenzhang/yhxx?id='+that.list[index].interaction_client_id
							})
						}
					}
				})

			},
			wen1:function(index,type,check,id){
				let that=this
				that.list[index].status=1
				if(type!=8 && type!=9){
					uni.navigateTo({
						url:'tongzhixq?id='+this.list[index].notice_id
					})
					return
				}
				if(type==8){
					if(check==1){
						let aid='GROUP'+id
						uni.setStorageSync('group_id',id)
						uni.navigateTo({
						  	url: `/im/chat/group_chat?conversationID=${aid}`,
						  	 // url: `/im/login/login`,
						})
					}else if(check==2){
						uni.navigateTo({
							url:'/sub/pages/jrsq_yuan?notice_id='+that.list[index].notice.id+'&index='+1
						})
					}
				}
				if(type==9){
					if(check==1){
						let aid='GROUP'+id
						uni.setStorageSync('group_id',id)
						uni.navigateTo({
						  	url: `/im/chat/group_chat?conversationID=${aid}`,
						  	 // url: `/im/login/login`,
						})
					}else if(check==2){
						uni.navigateTo({
							url:'/sub/pages/jrsq_yuan?notice_id='+that.list[index].notice.id+'&index='+2
						})
					}
				}
			},
			bzzx:function(){
				this.post('api/chat/notice_list',{page:this.page,limit:20},true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			hudong:function(){
				this.post('api/chat/interaction_list',{page:this.page,limit:20},true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: transparent!important;
		font-family: Demibold;
	}
</style>
